import React, { useCallback, useState } from 'react'; 

/**
 * 
 * @Leon useCallback不能进行的性能优化
 * 两个函数都会有函数的创建过程     
 */
export default function CallbackHookDemo01() {
    const [count, setCount] = useState(0);

    const increment1 = () => {
        console.log('执行increment1函数');
        setCount(count + 1);
    }

    // 这里如果不依赖count 返回的一直就是 0+1 的结果 依赖的一直是原来的不变的count
    const increment2 = useCallback(() => {
            console.log('执行increment2函数');
            setCount(count + 1);
    }, [count]);

    return (
        <div>
            <h2>CallbackHookDemo01: {count}</h2>
            <button onClick={increment1}>+1</button>
            <button onClick={increment2}>+1</button>
        </div>
    )
}